<template>
  <card-container
    title="投诉举报"
    width="938px"
    style="margin-bottom: 100px;padding-bottom: 40px;"
  >
    <div class="report-container">
      <div class="report-center">
        <div class="report-container__header">
          <div class="input-box">
            <input type="radio" id="违法违禁" value="违法违禁" v-model="typePicked">
            <label for="违法违禁">违法违禁</label>
          </div>
          <div class="input-box">
            <input type="radio" id="政治敏感" value="政治敏感" v-model="typePicked">
            <label for="政治敏感">政治敏感</label>
          </div>
          <div class="input-box">
            <input type="radio" id="色情低俗" value="色情低俗" v-model="typePicked">
            <label for="色情低俗">色情低俗</label>
          </div>
          <div class="input-box">
            <input type="radio" id="垃圾广告" value="垃圾广告" v-model="typePicked">
            <label for="垃圾广告">垃圾广告</label>
          </div>
          <div class="input-box">
            <input type="radio" id="内容侵权" value="内容侵权" v-model="typePicked">
            <label for="内容侵权">内容侵权</label>
          </div>
          <div class="input-box">
            <input type="radio" id="other" value="其它" v-model="typePicked">
            <label for="other">其它</label>
          </div>
        </div>
        <div class="report-container__main">
          <textarea class="report-header" placeholder="想要举报内容的链接" v-model="reportLink"></textarea>
          <textarea class="report-content" placeholder="请填写详细的举报内容" v-model="reportContent"></textarea>
          <div class="main-footer">
            <p class="img-box">添加反馈图片（可选）
              <img :src="imgSrc" alt="">
              <input type="file" @change="(e)=>changeToUploadCover(e)">
            </p>
            <login-input
              style="width: 334px;"
              :error-message="phoneErrMsg"
              placeholder="联系方式（可选）"
              v-model="mobile"
              @handleCheck="checkMobile"
              @cancelCheck="phoneErrMsg = ''"
              @keyup.enter.native="handleReport"
            ></login-input>
          </div>
        </div>
        <div class="report-container__submit">
          <button @click="handleReport">确定</button>
        </div>
      </div>
    </div>
  </card-container>
</template>

<script>
  import CardContainer from "../../components/pc/cardContainer";
  import LoginInput from "../../components/pc/loginCard/loginInput";
  import config from '../../action/config';
  import {checkPhone, checkVerification} from '../users/checkfrom';

  export default {
  name: "report",
  components: {CardContainer, LoginInput},
  data() {
    return {
      typePicked: '',
      reportLink: '',
      reportContent: '',
      contact: '',
      phoneErrMsg: '',
      mobile: '',
      imgSrc: ''
    }
  },

  created() {
    if(this.$route.query.type&&this.$route.query.id){
      this.reportLink = 'http://www.yunliyunwai/' + this.$route.query.type + '/detail/' + this.$route.query.id;
    }


  },
  methods: {
    checkMobile() {
      if (this.mobile !== '') {
        this.phoneErrMsg = checkPhone(this.mobile);
      }
    },
    //上传图片
    async changeToUploadCover(e) {

      let formData = new window.FormData();
      formData.append('file', e.target.files[0]);
      formData.append('type', 100);
      const isLt5M = (e).target.files[0].size / 1024 / 1024 < 5;
      if (!isLt5M) {
        this.$message.error('图片大小超过5M，请重新选择图片！');
        return false
      }
      let imgResponse = await this.$axios.$post(config.api.post.Resource.file, formData);
      if (imgResponse.code === 0) {
        this.imgSrc = imgResponse.data;//图片地址
        this.$message({
          type: 'success',
          message: '图片上传成功'
        })
      } else {
        this.$message({
          type: 'warning',
          message: imgResponse.msg
        })
      }

    },
    handleReport() {
      if (this.phoneErrMsg !== '') {
        this.$message({
          type: 'warning',
          message: '请检查联系方式'
        });
        return false
      }
      this.$axios.$post(config.api.post.Feedback.report, {
        content: this.reportContent,
        feedbackReason: this.typePicked,
        link: this.reportLink,
        mobile: this.mobile,
        picture: this.imgSrc,
      }).then(res => {
        console.log(res);
        if (res.code === 0) {
          this.$message({
            type: 'success',
            message: '您的投诉已发送'
          });
          Object.assign(this.$data, this.$options.data());
        } else {
          this.$message({
            type: 'warning',
            message: res.data.errMsg
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .report-container {
    .report-center {
      width: 726*$length;
      margin: 38*$length auto;

      .report-container__header {
        @extend %flex-row-spb;
        justify-content: flex-start;

        .input-box {
          margin-right: 40*$length;

          input[type="radio"] {
            display: none;
          }

          label {
            @include fontStyle(14, 19, 500, #666, left);
            vertical-align: middle;
          }

          input[type="radio"] + label::before {
            content: "\a0"; /*不换行空格*/
            display: inline-block;
            vertical-align: baseline;
            width: 16*$length;
            height: 16*$length;
            line-height: 16*$length;
            margin-right: 8*$length;
            border-radius: 50%;
            border: 1*$length solid #F0F0F0;
            background-color: #F4F5F5;
          }

          input[type="radio"]:checked + label::before {
            display: inline-block;
            vertical-align: baseline;
            width: 10*$length;
            height: 10*$length;
            line-height: 10*$length;
            margin-right: 8*$length;
            border: 4*$length solid #75D098;
            border-radius: 50%;
          }
        }
      }
      .report-container__main {
        margin-top: 30*$length;
        .report-header{
          @include fontStyle(14,19,500,#666,left);
          resize: none;
          width: 726*$length;
          height: 48*$length;
          padding: 14*$length 16*$length;
          background-color: #F4F8FA;
          @include border-radius(4*$length);
          margin-bottom: 24*$length;
        }
        .report-content {
          @include fontStyle(14,19,500,#666,left);
          resize: none;
          width: 726*$length;
          height: 200*$length;
          padding: 18*$length 16*$length;
          background-color: #F4F8FA;
          @include border-radius(4*$length);
        }
        .main-footer{
          margin-top: 24*$length;
          @extend %flex-row-spb;
          align-items: flex-end;
          .img-box {
            margin-bottom: 20*$length;
            overflow: hidden;
            width: 196*$length;
            background-color: #F4F8FA;
            @extend %cursorPointer;
            @include border-radius(4*$length);
            @include fontStyle(12, 130, 500, #999, center);

            & input {
              float: left;
              height: 100%;
              width: 100%;
              opacity: 0;
              transform: translateY(-200%);
              @extend %cursorPointer;
            }

            & img {
              float: left;
              height: 100%;
              width: 100%;
              transform: translateY(-100%);
              object-fit: contain;
            }
          }
          > input {
            padding: 15*$length 16*$length;
            background-color: #F4F8FA;
            @include border-radius(4*$length);
            @include fontStyle(14,18,500,#999,left);
            width: 242*$length;
            height: 48*$length;
            &:first-child {
              width: 302*$length;
              height: 48*$length;
            }
          }
          > img {
            width: 150*$length;
            height: 48*$length;
          }
        }
      }
      .report-container__submit {
        margin-top: 40*$length;
        text-align: center;
        > button {
          @include fontStyle(14,19,500,#fff,center);
          @include border-radius(4*$length);
          @extend %cursorPointer;
          display: inline-block;
          width: 148*$length;
          height: 48*$length;
          background-color: #75D098;
          border: none;
        }
      }
    }
  }
</style>
